<!DOCTYPE html>
<html>
<head>
	<title>Test Google Charts</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	
	<script src="../_js/jquery-1.10.2.min.js"></script>
	<script src="../_js/jquery-ui.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,700,300,800,600' rel='stylesheet' type='text/css'>

	
</head>


<body>


 <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
	valeurBase=[
        ['A', 'a', 'Aa@gmail.com'],
        ['B', 'b', 'Bb@gmail.com'],
        ['C', 'C', 'Cc@gmail.com'],
                ];
				
    function remplitable(valeur){
	var visualization;

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Nom');
    data.addColumn('string', 'Prenom');
    data.addColumn('string', 'Mail');
    data.addRows(valeur);

      visualization = new google.visualization.Table(document.getElementById('table'));
      visualization.draw(data, null);

     


    }

	function isFiltreCocher(){
var retour = '';
var children = $('.filtre').children();

for(var i = 0; i < children.length;i++){
//console.log('ICI : '+children[0].value)

//if
if($('#'+children[i].id).is(':checked')){
	retour+=children[i].id+"="+children[i].value+"&"

}

//	retour+=$('#'+children).val()+'='+$('#'+children).id+'&'	
//} 


}
retour = retour.substr(0, retour.length-1)
//alert(retour);
return retour
}
    

   
       
    


   
    </script>
  
  <body style="font-family: Arial;border: 0 none;">

<fieldset><title>Filtre</title>
<div class="filtre">

Sexe :
Femme :<input class=filtrechoix id="genreh" type="checkbox" value ="F"/></br>
Homme :<input class=filtrechoix id="genref" type="checkbox" value ="H"/>
</div>
</fieldset>

 <div id="table"></div>
<!--div id="lance" style=" height:40px; width: 100px; border : 1px solid black;"></div-->


  </body>




<script>
$(document).ready(function () {

google.setOnLoadCallback(remplitable(valeurBase));

$('.filtrechoix').click(function(){

console.log($('.filtre').children());
data=isFiltreCocher();
	$.ajax({
	type: "POST",
	url: "../_ajax/googleTab.php",
	context: document.body,
	data : data
	})
	.done(function(zob) {
		console.log(zob);
		//replitable('[[pipa,philippe,philippe.pipa@gmail.com]])
		remplitable(eval(zob));
		//remplitable(eval('[["pipa","philippe","philippe.pipa@gmail.com"]]'));
		});
	})


});


</script>
</body>

</html>
